<div id="app">
    <!-- 
        过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。
        过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。
        过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用
     -->
    <!-- 插值表达式 -->
    <p>{{ message | capitalize }}</p>

    <!-- v-bind 属性绑定 -->
    <div :id="rawId | formatId">
        {{rawId}}
    </div>

    <!-- 
        连续调用多个过滤器：
        把 message 的值，交给 filterA 进行处理
        把 filterA 处理的结果，再交给 filterB 进行处理
        最终把 filterB 处理的结果，作为最终的值渲染到页面上

        过滤器还可以传参 arg1,arg2
    -->
    <p>{{ message | filterA(' qiuqian ','welcome') | filterB }}</p>

</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
    // 全局过滤器：可在多个 vue 实例之间共享
    Vue.filter('filterA', (str, name, str2) => {
        return str.charAt(0).toUpperCase() + str.slice(1) + name + str2
    })

    // vue 实例
    const vm = new Vue({
        el: '#app',
        data: {
            message: 'hello world!',
            rawId: 100
        },
        // vue3 将取消过滤器
        // 在 filters 中定义的过滤器为“私有过滤器”，只作用于当前 vm 实例所控制的 el 区域
        filters: {
            capitalize(str) {
                // 将首字母转为大写的过滤器
                return str.charAt(0).toUpperCase() + str.slice(1)
            },
            formatId(num) {
                return Number(num) + 100
            },
            filterB(str) {
                return str + '!'
            }
        }
    })
</script>